﻿<html>
    <head>
        <script src="Scripts/jquery-1.4.2.min.js"></script>

        <script language="javascript">
            $(document).ready(function () {

                $(".cms-control").css("cursor", "pointer");
                $(".cms-control").attr("unselectable", "true");

                $(".cms-control").click(function (e) {
                    $("#cms-group").remove();
                    $("#cms-label").remove();

                    var index = $(this).attr("cms-index");
                    var name = $(this).attr("cms-name");
                    var childControl = $(this).attr("cms-childcontrol");
                    var controls = $(".cms-control[cms-index=" + index + "]");

                    boxElements(controls, "parent", name, false);
                    if (childControl != null && childControl != "") {
                        var controls = $(".cms-control[cms-index=" + index + "][cms-childcontrol='" + childControl +"']");
                        boxElements(controls, "child", childControl, true);
                    }

                    e.preventDefault();
                    e.stopPropagation();
                });

                $(document).click(function () {
                    $("#cms-groupparent").remove();
                    $("#cms-labelparent").remove();
                    $("#cms-groupchild").remove();
                    $("#cms-labelchild").remove();
                });


            });

            function boxElements(controls, id, text,placeTop) {
                var left = 9999999;
                var top = 9999999;
                var right = 0;
                var bottom = 0;
                controls.each(function () {
                    var l = $(this).offset().left;
                    var t = $(this).offset().top;
                    var r = l + $(this).width();
                    var b = t + $(this).height();

                    if (l < left)
                        left = l;

                    if (t < top)
                        top = t;
                    if (b > bottom)
                        bottom = b;
                    if (r > right)
                        right = r;
                });

                $("body").append("<div id=\"cms-group" + id + "\" style=\"left:" + left + "px;top:" + top + "px;width:" + (right - left) + "px;height:" + (bottom - top) + "px;position:absolute;border:1px dotted blue\"></div>");
                if (!placeTop)
                    $("body").append("<div id=\"cms-label" + id + "\" style=\"left:" + (left + 2) + "px;top:" + (bottom + 2) + "px;position:absolute;border:1px solid silver;background-color:#FFEC8B\">" + text + "</div>");
                else
                    $("body").append("<div id=\"cms-label" + id + "\" style=\"left:" + (left + 2) + "px;top:" + (top) + "px;position:absolute;border:1px solid silver;background-color:#FFEC8B\">" + text + "</div>");
            }
            
        </script>

    </head>
    <body>

        <div>
            Not A Component
        </div>

        <div class="cms-control" cms-index="0" cms-name="A Name" cms-childcontrol="a">
            A Control
        </div>

        <div class="cms-control" cms-index="0" cms-name="A Name" cms-childcontrol="b">
            A Control
        </div>
    </body>
</html>